<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> new document </title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> var jQ = jQuery.noConflict();  </script>
<script type="text/javascript">
 jQ(document).ready(function(){
  jQ(".tab").children().eq(0).children("div").css("display","inline-block");
  jQ(".tab li").eq(0).addClass("on1");
  //jQ(".tabs li").mouseover(function(){
   //jQ(this).addClass("on");
   //return false;
  //});
  jQ(".tab li").mouseleave(function(){
   jQ(this).removeClass("on");
   return false;
  });
  jQ(".tab li").click(function(){
   jQ(".tab li").removeClass("on1");
   jQ(this).addClass("on1");
  });
  jQ(".depth a").click(function(){
   jQ(".depth").children("div").hide();
   jQ(this).next("div").show();
  });
 });
</script>
<style type="text/css" >
* {margin:0;}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,caption,form,fieldset,legend,input,textarea,button{margin:0;padding:0;}
body,div,dl,dt,dd,h1,h2,h3,h4,form,fieldset,p,td,input{font-family: Dotum, "돋움", Gulim, "굴림", AppleGothic, sans-serif, Tahoma, Verdana;font-size:12px;line-height: 1.5; font-weight:normal;}
a {color:#444;text-decoration:none;}
a:hover{color:#006e55;text-decoration:none;}
.tab {height: 35px; position:relative;}
.tab li {  float:left; width: 138px; height:33px; border: 1px #ccc solid; color: #666; font-weight:600; font-size: 14px; display:inline-block; border-right: 0; line-height: 33px; text-align: center;}
.tab li a { width: 138px; height:33px; color: #666; font-weight:600; font-size: 14px; float:left; border-right: 0; line-height: 33px; text-align: center; display:inline-block; }
.tab li.end { border-right: 1px #ccc solid;}
.tab li.on, .tab li.on1{ border: none; width: 138px; height: 35px; background:#c1c1c1; color: #fff;}
.tab li.on a, .tab li.on1 a{ color: #fff; }
.tab div {color:#666;}
.tab .depth >div{display:none; font-size:30px; width:414px; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; position:absolute; left:0; top:35px}
 #imagetab {margin-left: 35px; }
</style>
</head>
<body>
<div id =imagetab >
<ul class="tab">
 <li class="depth"><a href="javascript:void(0);">Tab1</a>
  <div>
   	<img src="./jsp/image/tabimage.gif">
  </div>    
 </li>
 <li class="depth"><a href="javascript:void(0);">Tab2</a>
  <div>
   <img src="./jsp/image/tabimage2.gif">
  </div>
 </li>
 <li class="depth end"><a href="javascript:void(0);">Tab3</a>
  <div>
   <img src="./jsp/image/tabimage3.gif">
  </div>    
 </li>
</ul>
</div>
</body>
</html>
